<template>
    <div-row :obj="obj" class="content-wrapper text-picture">
        <el-row :gutter="obj.gutter">
            <el-col :span="24/obj.columns" v-for="(item,index) in obj.imgTextBox" :key="index">
                <div class="card-box" :class="obj.animateImg? 'wow '+obj.animateImg : ''" @click="goClick(item.httpUrl)">
                    <div class="hd" :style="{backgroundColor: item.backgroundColor,backgroundImage: `url(${item.imgUrl})`}">
                        <h2 class="hd-title" v-html="item.title"/>
                        <p class="hd-desc" v-html="item.desc"/>
                    </div>
                    <div class="text-box">
                        <div class="info" v-html="item.info"/>
                        <div class="text-center"><el-button :style="{backgroundColor: item.backgroundColor,color: '#fff' }" round>了解更多</el-button></div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div-row>
</template>
<script>
import animate from '@/mixins/animate'
export default {
    name: 'ThreeColumns3',
    mixins: [animate]

}
</script>
<style lang="scss" scoped>
    .content-wrapper{
        .el-row,.el-col{
            height: 100%;
        }
        .card-box{
            border-radius: 5px 5px 0 0;
            height:100%;
            .hd{
                min-height: 200px;
                height: 30%;
                padding: 30px 0 0 40px;
                color:#fff;
                background-repeat: no-repeat;
                .hd-title{
                    font-size: 36px;
                    padding: 10px 0;
                }
                .hd-desc{
                    padding-right: 15px;
                }
            }
            .text-box{
                min-height: 300px;
                height: 70%;
                position: relative;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                border: 1px solid #ededed;
                background-color: #fff;
                box-shadow: 1px 2px 10px rgba(0,0,0,.1);
                padding: 20px;
                .info{
                    padding-bottom: 20px;
                }
                .text-center{
                    text-align: center;
                }
            }
        }

    }
</style>

